import React from "react";
import SportStyle from "./sport.module.css";
import "./style.css";
import { useNavigate } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import { MoreOutline, CloseOutline } from "antd-mobile-icons";
export default function sport() {
  const navigate = useNavigate();
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <MoreOutline />
      </Space>
    </div>
  );
  const back = () => {
    navigate("/app/shou");
  };

  return (
    <div
      id={SportStyle.Sport}
      className="animate__animated animate__fadeInDown"
    >
      <div id={SportStyle.SportHead}>
        <NavBar
          backArrow
          onBack={back}
          right={right}
          style={{ background: "#2A6049", color: "white", height: "100%" }}
        >
          <h4>运动</h4>
        </NavBar>

        <div className="container">
          <div className="card">
            <h1 className="title">Running</h1>
            <p className="subtitle">慢跑</p>
            <button
              className="btn"
              onClick={() => {
                navigate("/map");
              }}
            >
              Start
            </button>
          </div>
          <div className="card">
            <h1 className="title">Running</h1>
            <p className="subtitle">瑜伽</p>
            <button className="btn">Start</button>
          </div>
          <div className="card">
            <h1 className="title">Running</h1>
            <p className="subtitle">快走</p>
            <button className="btn">Start</button>
          </div>
          <div className="card">
            <h1 className="title">Running</h1>
            <p className="subtitle">骑行</p>
            <button className="btn">Start</button>
          </div>
          <div className="blob"></div>
        </div>
      </div>
    </div>
  );
}
